<template>
  <header>
    <div class="wrapper">
      <!-- 清理注释代码 -->
    </div>
  </header>
  <div class="common-layout">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header class="main-header">
        <el-menu class="horizontal-menu" mode="horizontal" :ellipsis="false">
          <div class="header-content">
            <div class="welcome-text">
              <span class="welcome-title">欢迎您，</span>
              <span class="username">{{ store.counterStore.userName }}</span>
            </div>
            <div class="logout-container">
              <el-button type="primary" link @click="handleLogout" class="logout-btn">
                <el-icon>
                  <SwitchButton />
                </el-icon>
                <span>退出登录</span>
              </el-button>
            </div>
          </div>
        </el-menu>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside ref="sidebarRef" width="220px" class="sidebar">
          <el-menu active-text-color="#409EFF" background-color="#ffffff" text-color="#303133" class="vertical-menu"
            router :default-openeds="[23]">
            <MenuTree :menus="APImenuTree" />
          </el-menu>
        </el-aside>
        <!-- 主内容区 -->
        <el-main class="main-content">
          <div class="content-wrapper">
            <RouterView />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useCounterStore } from '@/stores/counter';
import axios from 'axios';
import MenuTree from './MenuTree.vue';
import { SwitchButton } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import {read,write} from "@/axios/axiosHelper"

const store = useCounterStore();
const router = useRouter();
const APImenuTree = ref([]);
const sidebarRef = ref(null);

// 获取菜单树数据
const GetMenuTree = () => {
  read.get(`/read/api/User/GetTreeMenu?UserId=${store.counterStore.userId}`)
    .then(res => {
      APImenuTree.value = res.data.data;
    })
    .catch(error => {
      console.error('Error fetching menu data:', error);
    });
};

// 退出登录处理
const handleLogout = () => {
  // 这里添加退出登录逻辑
  router.push('/');
};

onMounted(() => {
  GetMenuTree();
});
</script>

<style lang="scss" scoped>
// 颜色变量
$primary-color: #409EFF;
$hover-color: #ecf5ff;
$border-color: #ebeef5;
$shadow-color: rgba(0, 0, 0, 0.1);
$new-bg-color: #f4f4f4; // 新的背景颜色，稍微加深
$secondary-color: #6c757d; // 新增辅助颜色

.main-header {
  height: 64px;
  border-bottom: 1px solid $border-color;
  background: $new-bg-color; // 修改头部背景颜色
  box-shadow: 0 2px 12px 0 $shadow-color;
  padding: 0; // 确保头部导航栏无内边距

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 24px;

    .welcome-text {
      font-size: 20px; // 增大字体大小

      .welcome-title {
        color: $secondary-color; // 改变欢迎标题颜色
      }

      .username {
        color: $primary-color;
        font-weight: 600; // 增加字体粗细
        margin-left: 10px;
      }
    }

    .logout-btn {
      padding: 10px 20px; // 增大按钮内边距
      transition: all 0.3s;

      &:hover {
        background: $hover-color;
        border-radius: 6px; // 增大圆角半径
      }

      span {
        margin-left: 8px;
      }
    }
  }
}

.sidebar {
  background: #ffffff; // 侧边栏背景颜色为白色
  border-right: 1px solid $border-color;
  transition: width 0.3s;
  padding: 0; // 确保侧边栏无内边距
  // position: fixed; // 固定定位
  left: 24px; // 往右移动，与头部导航栏左右对齐
  width: 220px;

  .vertical-menu {
    border-right: none;
    padding-top: 0; // 确保菜单顶部无额外间距

    :deep(.el-menu-item) {
      height: 50px; // 增大菜单项高度
      line-height: 50px;
      margin: 5px 0;
      transition: all 0.2s;

      &:hover {
        background: $hover-color;
        color: $primary-color; // 鼠标悬停时字体颜色改变
      }

      &.is-active {
        background: $hover-color;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 6px; // 增大激活状态下的左侧边框宽度
          background: $primary-color;
        }
      }
    }
  }
}

.main-content {
  background: $new-bg-color; // 修改主内容区背景颜色
  padding: 25px; // 增大内边距
  margin-left: 0px; // 为侧边栏留出空间，考虑左侧边距

  .content-wrapper {
    background: #ffffff;
    border-radius: 10px; // 增大圆角半径
    padding: 30px; // 增大内边距
    box-shadow: 0 4px 16px 0 $shadow-color; // 增强阴影效果
    min-height: calc(100vh - 104px);
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 0;
    transition: width 0.3s;

    &.mobile-open {
      width: 220px;
    }
  }

  .main-header {
    .header-content {
      padding: 0 12px;

      .welcome-text {
        font-size: 16px;
      }

      .logout-btn span {
        display: none;
      }
    }
  }

  .main-content {
    margin-left: 0;
  }
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}
</style>